<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="e-top u-flex u-col-center u-row-between">
					<view class="l u-flex u-col-center">
						<image :src="http + item.member.avatar" mode="aspectFill"></image>
						<view class="text u-l-1">{{item.member.nickname}}</view>
					</view>
					<view class="r">
						{{$u.timeFormat(item.createtime, 'yyyy-mm-dd')}}
					</view>
				</view>
				<view class="e-con">
					<view class="info">
						{{item.content}}
					</view>
					<view class="imgs" v-if="item.imageList.length > 0">
						<scroll-view class="scroll-view_H" scroll-x="true">
							<view class="i" v-for="(item2,index2) in item.imageList" :key="index2"
								@click="pimg(index2,item.imageList)">
								<image :src="http + item2" mode="aspectFill"></image>
							</view>
						</scroll-view>
					</view>
					<view class="reply" v-if="item.reply">
						店家回复：{{item.reply}}
					</view>
				</view>
			</view>
			<view class="nolist" v-if="nolist">
				<image src="../../static/image/no.png" mode="aspectFill"></image>
				<text>暂无评论记录</text>
			</view>
		</view>
		<view class="w-btn u-flex u-col-center u-row-center" @click="open">
			<image src="@/static/image/w.png" mode="aspectFit"></image>
			<text>写评价：口味如何，对商品和服务等满意吗？</text>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="bottom">
			<view class="e-pop">
				<view class="e-top">
					<view class="textarea">
						<textarea v-model="textarea"
							placeholder-style="color:#D1D1D6;font-size: 28rpx;font-weight: 400;"
							placeholder="口味如何，对商品和服务等满意吗？" />
					</view>
					<view class="imgs u-flex u-col-center u-row-left" v-if="images.length>0">
						<view class="item" v-for="(item,index) in images" :key="index">
							<image :src="http + item" mode="aspectFill"></image>
							<view class="del" @click="images.splice(index,1)">
								<image src="../../static/image/del.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="item2" @click="upload">
							<image src="../../static/image/add.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<view class="img-btn u-flex u-row-between u-col-center">
					<view class="upload" @click="upload">
						<image src="../../static/image/rimg.png" mode="aspectFill"></image>
					</view>
					<view class="btn" :class="{on:textarea}" @click="submit">
						提交评价
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				textarea: "",
				list: [],
				longitude: '',
				latitude: "",
				shopData: {},
				page: 1,
				http: this.$imgUrl,
				uid: '',
				images: [],
				nolist: false,
				nodata: false
			}
		},
		onLoad() {

			if (!uni.getStorageSync('uid')) {
				this.login()
			} else {
				this.uid = uni.getStorageSync('uid')
			}
			this.longitude = uni.getStorageSync("lng")
			this.latitude = uni.getStorageSync("lat")

		},
		onShow() {
			this.page = 1
			this.list = []
			if (uni.getStorageSync('shopData')) {
				this.shopData = JSON.parse(uni.getStorageSync('shopData'))
				this.getList()
			} else {
				this.getHomeData()
			}
		},
		onReachBottom() {
			if (this.nodata) {
				uni.showToast({
					title: '没有了',
					icon: "none"
				});
				return
			}
			this.page++
			this.getlist()
		},

		methods: {
			login() {
				uni.login({
					provider: 'weixin',
					success: (r) => {
						console.log(r)
						if (r.errMsg == 'login:ok') {
							this.$http.post('/app/indexs/login', {
								code: r.code,
							}).then(res => {
								if (res.code == 0) {
									if (res.data.id) {
										this.uid = res.data.id
										uni.setStorageSync('uid', res.data.id)
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										});
									}
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							}).catch(err => {
								console.log('表单错误信息：', err);
							})

						}
					},
					fail: (err) => {

					}
				})
			},
			pimg(i, list) {
				uni.previewImage({
					urls: list.map(item => this.http + item),
					current: i
				});
			},
			upload() {
				this.$http.uploads().then(res => {
					console.log(res, 888888)
					this.images = [...this.images, ...res]

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			submit() {
				if (!this.textarea) {
					uni.showToast({
						title: '评论内容不能为空',
						icon: "none"
					});
					return
				}
				this.$http.post('/app/comments/commentSubmit', {
					mid: this.uid,
					shop_id: this.shopData.id,
					content: this.textarea,
					images: this.images.toString()
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: '添加成功',
							icon: "none"
						});
						this.show = false
						this.textarea = ''
						this.images = []
						this.page = 1
						this.list = []
						this.getList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			getHomeData() {
				this.$http.post('/app/homes/index', {
					longitude: this.longitude,
					latitude: this.latitude,
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						if (!uni.getStorageSync('shopData')) {
							this.shopData = this.shopList[0]
							uni.setStorageSync('shopData', JSON.stringify(this.shopData))
						}
						this.getList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getList() {
				this.$http.post('/app/comments/commentList', {
					shop_id: this.shopData.id,
					page: this.page,

				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.list = [...this.list, ...res.data.list]
						this.nolist = this.list.length == 0
						this.nodata = res.data.list.length == 0
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 20rpx;

		.nolist {
			padding: 100rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex-direction: column;

			image {
				width: 320rpx;
				height: 300rpx;
			}

			text {
				margin-top: 20rpx;
				height: 40rpx;
				line-height: 40rpx;


				font-size: 28rpx;
				color: #979797;
				text-align: center;

			}
		}

		.e-pop {
			padding: 20rpx;

			.e-top {
				background: #F8F8F9;
				padding: 20rpx;
				border-radius: 20rpx;
			}

			.imgs {
				margin-top: 20rpx;
				flex-wrap: wrap;

				.item2 {
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					border-radius: 6rpx;
					overflow: hidden;
					background-color: #fff;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.item {
					width: 80rpx;
					height: 80rpx;
					margin: 0 10rpx 10rpx 0;
					position: relative;


					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 6rpx;
						overflow: hidden;
					}

					.del {
						position: absolute;
						top: 5rpx;
						right: 5rpx;
						width: 20rpx;
						height: 20rpx;

						image {
							width: 20rpx;
							height: 20rpx;
							display: block;
						}
					}
				}
			}

			.textarea {
				height: 105rpx;

				textarea {
					font-size: 28rpx;
					width: 100%;
					height: 105rpx;
					color: #000;

				}
			}

			.img-btn {
				margin-top: 20rpx;

				.upload {
					width: 48rpx;
					height: 48rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.btn {
					width: 152rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					text-align: center;
					font-size: 28rpx;
					border-radius: 30rpx;
					color: #D1D1D6;
					border: 2rpx solid #D1D1D6;
				}

				.on {
					background: #E51B00;
					color: #fff;
					border-color: #E51B00;
				}

			}
		}

		.w-btn {
			text-align: center;
			height: 72rpx;
			line-height: 72rpx;
			background: #000000;
			border-radius: 36rpx;
			position: fixed;
			z-index: 999;
			left: 20rpx;
			bottom: 20rpx;
			right: 20rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			text {


				font-size: 28rpx;
				color: #FFFFFF;
				text-align: left;

			}
		}

		.list {
			.item {
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;

				.e-con {
					margin-top: 20rpx;

					.reply {
						margin-top: 20rpx;
						padding: 20rpx;
						background: #FAF9F7;
						border-radius: 20rpx;
						font-size: 28rpx;
						color: #666;
					}

					.info {

						line-height: 40rpx;


						font-size: 28rpx;
						color: #000000;
						text-align: left;

					}

					.imgs {
						margin-top: 20rpx;
						width: 100%;
						height: 158rpx;

						.scroll-view_H {
							width: 100%;
							height: 100%;
							white-space: nowrap;

							.i {
								display: inline-block;
								width: 158rpx;
								height: 158rpx;
								border-radius: 12rpx;
								overflow: hidden;

								margin-right: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

				.e-top {
					height: 50rpx;
					line-height: 50rpx;

					.l {
						flex: 1;
						width: 1rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-right: 10rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						.text {
							flex: 1;
							width: 1rpx;
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							text-align: left;

						}
					}

					.r {
						width: 220rpx;
						height: 40rpx;
						line-height: 40rpx;

						font-size: 24rpx;
						color: #979797;
						text-align: right;

					}
				}
			}
		}
	}
</style>